<template>
	<view>
		<!-- 自己发出的消息 -->
		<view class="my" v-if="row.msg.user_info.uid == myData.id">
			<!-- 右键 -->
			<view class="right-click" v-show="row.msg.id==rClickId">
				<view @tap="copyFunc(row)">复制</view>
				<view @tap="deleteFunc(row)">删除</view>
				<!--<view @tap="forwardFunc(row)" v-if="row.msg.type!=7">转发</view>-->
				<!--<view @tap="collectFunc(row)" v-if="row.msg.type==1">收藏</view>-->
				<text @tap="rollBackFunc(row)">撤回</text>
			</view>

			<!-- 左-消息 -->
			<view class="left">
				<!-- 文字消息 -->
				<view @longtap="openRight(row)" v-if="row.msg.type==0" class="bubble text">
					<rich-text :nodes="row.msg.content.text"></rich-text>
				</view>
				<!-- 语言消息 -->
				<view @longtap="openRight(row)" v-if="row.msg.type==1" class="bubble voice" @tap="playVoice(row.msg)" :class="playMsgId == row.msg.id?'play':''">
					<view class="length">{{row.msg.content.length}}</view>
					<view class="icon my-voice"></view>
				</view>
				<!-- 图片消息 -->
				<view @longtap="openRight(row)" v-if="row.msg.type==2" class="bubble img" @tap="showPic(row.msg)">
					<image :src="staticPath + row.msg.content.url" style="max-width: 100%" :style="{ width: row.msg.content.w + 'px', height: row.msg.content.h + 'px' }"
						   :lazy-load="true"
					/>
				</view>
				<!-- 视频消息 -->
				<view v-if="row.msg.type == 3" class="bubble img">
					<video :src="staticPath + row.msg.content.url" objectFit="cover" style="max-height: 200px;" :lazy-load="true"/>
				</view>
				<!-- 红包 -->
				<view v-if="row.msg.type==5" @tap="openRedEnvelopeFunc(index)">
					<view class="message-red-packet-right" :style="row.msg.content.surplus_money===0?'background:#F7DFC3':'background:#F09D47'">
						<view class="text">
						  <image :src="row.msg.content.surplus_money===0?'/static/img/red-chai.png':'/static/img/red.png'"></image>
						  <span class="packet">{{row.msg.content.blessing}}</span>
						</view>
						<view :class="row.msg.content.surplus_money===0?'footer2':'footer'">红包</view>
						<view class="arrow-org" :style="row.msg.content.surplus_money===0?'background:#F7DFC3':'background:#F09D47'"></view>
					</view>
				</view>
			</view>

			<!-- 右-头像 -->
			<view :class="row.msg.type==0?'right text':'right'" @tap="goDetails(row.msg.user_info.uid)">
				<image :src="myPhoto" :lazy-load="true"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import ImgCache from '@/components/img-cache/img-cache.vue';
	import _data from "../../util/_data";

	export default {
		name: 'right-bubble',
		components:{
			ImgCache
		},
		props: {
			row: {
				type: Object,
				default() {
					return {};
				}
			},
			playMsgId: {
				type: String,
				default: ''
			},
			index:{
				type:Number,
				default:0
			},
			msgImgList:{
				type:Array,
				default:[]
			},
			myData:{
				type: Object,
				default() {
					return {
						id:''
					};
				}
			},
			chat_id:{
				type: String,
				default: ''
			},
		},
		data() {
			return {
				rClickId:''
			};
		},
		computed: {
			myPhoto() {
				if (_data.data('cache').local_photo) {
					return _data.data('cache').local_photo;
				} else {
					return _data.staticPhoto() + _data.data('user_info').photo;
				}
			},
			imgRan() {
				return Math.random();
			},
			staticPath() {
				return _data.staticChat() + this.chat_id + '/';
			},
			staticPhoto() {
				return _data.staticPhoto();
			}
		},
		filters: {
			formatDate: function (e) {
				// 获取js 时间戳
				let time = new Date().getTime();
				// 去掉 js 时间戳后三位
				time = parseInt((time - e) / 1000);
				// 存储转换值
				let s;
				if (time < 60 * 10) {
				  // 十分钟内
				  return '刚刚';
				} else if (time < 60 * 60 && time >= 60 * 10) {
				  // 超过十分钟少于1小时
				  s = Math.floor(time / 60);
				  return s + '分钟前';
				} else if (time < 60 * 60 * 24 && time >= 60 * 60) {
				  // 超过1小时少于24小时
				  s = Math.floor(time / 60 / 60);
				  return s + '小时前';
				} else if (time < 60 * 60 * 24 * 3 && time >= 60 * 60 * 24) {
				  // 超过1天少于3天内
				  s = Math.floor(time / 60 / 60 / 24);
				  return s + '天前';
				} else {
				  // 超过3天
				 var date = new Date(e);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				 var Y = date.getFullYear() + '-';
				 var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				 var D = date.getDate() + ' ';
				 var h = date.getHours() + ':';
				 var m = date.getMinutes() + ':';
				 var ss = date.getSeconds();
				 return Y+M+D+h+m+ss;
				}
			}
		},
		methods:{
			openRight(row){
				this.rClickId = row.msg.id
				//this.$emit('openRight', row);
			},
			goDetails(obj){
				this.$emit('goDetails', obj);
			},
			//收藏表情
			collectFunc({msg}){
				this.$socket.addEmoticon(this._user_info.id, msg.content, res => {
					if(res.success){
						uni.showToast({
							icon:'none',
							title:'添加成功'
						})
					}
				  });
			},
			// 打开红包
			openRedEnvelopeFunc(index){
				this.$emit('openRedEnvelopeFunc',index);
			},
			//处理红包数据
			redenvelopeProcess(msg){
				return msg;
			},
			// 预览图片
			showPic(msg){
				uni.previewImage({
					indicator:"none",
					current: this.staticPath + msg.content.url.replace('_thumb', ''),
					urls: this.msgImgList
				});
			},
			// 播放语音
			playVoice(msg){
				this.AUDIO.stop();
				if (this.playMsgid == msg.id) {
					this.playMsgid = null;
				} else {
					this.playMsgid = msg.id;
					//	this.AUDIO.obeyMuteSwitch = false;
					this.AUDIO.src = this.staticPath + msg.content.url + '?_=' + Math.random();
					this.$nextTick(function () {
						this.AUDIO.play();
					});
				}
			},
			playMp3(msg){
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src = this.staticPath + msg.content.url + '?_=' + Math.random();
				innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				});
			},
			recordToJson(msg){
				let s =JSON.parse(msg);
				return s
			},
			//复制
			copyFunc(row){
				this.$emit('copyFunc',row);
				this.rClickId=null;
				return;
				uni.setClipboardData({
					data:row.msg.content.text,
					success:()=>{
						uni.showToast({
							title:"复制成功"
						})
					}
				});
			},
			//撤销
			rollBackFunc(row){
				let _this=this;
				uni.showActionSheet({
					itemList: ['确认'],
					success: function (res) {
						if(res.tapIndex==0){
							_this.$emit('rollBackFunc',row);
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
				this.rClickId=null;
			},
			//转发
			forwardFunc({msgType,msgContext}){
				this.$u.route({
					url:'pages/chat/forward',
					params:{msgType,msgContext}
				});
			},
			sendMsg(index, msg){
				this.$emit('sendMsg',index,msg);
			},
			//名片
			linkToCard(id){
				this.$u.route({
					url: 'pages/businessCard/businessCard',
					params:{ id: id, source: 1}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/chat/style.scss";
</style>
